<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>User Info</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <!-- Alertdialog -->
    <link rel="stylesheet" type="text/css" href="/css/ui-dialog.css">
    <!-- 日历 -->
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/daterangepicker-bs3.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
</head>

<body>
    <div class="container">
        <%- include('../head.ejs')%>
            <div class="panel panel-info text-center">
                <div class="panel-heading text-center">
                    <%if (user.icon == '') {%>
                        <img src="/imgs/toxiang.png" width="50px" class="img-responsive img-circle iconImg" alt="" style="margin:0 auto;">
                        <%}else{%>
                            <img src="<%= user.icon%>" width="50px" class="img-responsive img-circle iconImg" alt="" style="margin:0 auto;">
                            <%}%>
                </div>
                <div class="panel-body">
                    <form action="/user/info" method="POST" role="form">
                        <input value="<%= user.icon%>" type="hidden" name="icon" id="icon" class="form-control" value="">
                        <div class="form-group">
                            <label for="name">User Name</label>
                            <input readonly="readonly" value="<%= user.name%>" type="text" class="form-control" id="name" name="name" placeholder="Input User Name">
                            <div id="name_message"></div>
                        </div>
                        <div class="form-group">
                            <label for="gender">User Gender</label>
                            <select name="gender" id="gender" class="form-control" required="required">
                                <%if (user.gender == '男') {%>
                                    <option value="未知">Please Choose your Gender</option>
                                    <option value="男" selected="selected">-- 男 --</option>
                                    <option value="女">-- 女 --</option>
                                    <%}else if(user.gender == '女'){%>
                                        <option value="未知">Please Choose your Gender</option>
                                        <option value="男">-- 男 --</option>
                                        <option value="女" selected="selected">-- 女 --</option>
                                        <%}else{%>
                                            <option value="未知">Please Choose your Gender</option>
                                            <option value="男">-- 男 --</option>
                                            <option value="女">-- 女 --</option>
                                            <%}%>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for='birthday'>User Birthday</label>
                            <input type="text" readonly name="birthday" id="birthday" class="form-control" value="<%= user.birthday.toString().slice(0,10)%>" />
                        </div>
                        <div class="form-group">
                            <label for="habits">User Habtis</label>
                            <input value="<%= user.habits.join(',')%>" type="text" class="form-control" id="habits" name="habits" placeholder="Input User Habtis,plese use [,] split">
                        </div>
                        <div class="form-group">
                            <label for='introduction'>User Introduction</label>
                            <textarea name="introduction" id="introduction" class="form-control" rows="3" placeholder="input your Introduction" required="required">
                                <%= user.introduction%>
                            </textarea>
                        </div>
                        <button type="submit" id="btn_submit" class="btn btn-primary btn-block">Submit</button>
                    </form>
                </div>
            </div>
            <%- include('../footer.ejs')%>
    </div>
    <script type="text/javascript" src="/js/jquery-1.10.2.js"></script>
    <!-- Bootstrap JavaScript -->
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!-- dialog-min.js -->
    <script src="/js/dialog-min.js" type="text/javascript" charset="utf-8" async defer></script>
    <!-- dialog-plus-min.js -->
    <script src="/js/dialog-plus-min.js" type="text/javascript" charset="utf-8" async defer></script>
    <script src="/js/MyAjaxForm.js" type="text/javascript"></script>
    <!-- 日历 -->
    <script src="/js/moment.js"></script>
    <script src="/js/daterangepicker.js"></script>
    <script type='text/javascript'>
    $(function() {
        // 日历
        $('#birthday').daterangepicker({
            singleDatePicker: true
        }, function(start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
        });

        $('.navUserInfo').addClass('active');
        $('#btn_submit').on('click', function() {
            if (!confirm('确认修改')) {
                return false;
            }
        });

        $('.iconImg').on('click', function() {
            var html = "<form action='#' method='POST' class='form-inline' role='form' id='fileForm' enctype='multipart/form-data'>";
            html += "<div class='form-group'>";
            html += "<input type='file' class='form-control' id='file' name='file'>";
            html += "</div>";
            html += "</form>";

            var d = dialog({
                fixed: true,
                title: "上传头像",
                content: html,
                okValue: '确定',
                ok: function() {
                    var that = this;
                    if ($('#file').val() === '') {
                        alert('请选择文件');
                        $('#file').focus();
                        return false;
                    }
                    that.title = "正在上传......";
                    $('#fileForm').ajaxSubmit({
                        type: 'post',
                        url: '/upload',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            if (data.status) {
                                $('#icon').val(data.data);
                                $('.iconImg').attr('src', data.data);
                            } else {
                                alert('上传失败,请稍后再试!');
                            }
                            that.close();
                            that.remove();
                            return true;
                        }
                    });
                    return false;
                },
                button: [{
                    value: "取消",
                    callback: function() {
                        this.close();
                    }
                }]
            });
            d.showModal();
        });
    });
    </script>
</body>

</html>
